<style include="signin-dialog-shared">
  :host {
    --avatar-size: 100px;
    --banner-height: 244px;
    --banner-size: auto;
    --confirmation-description-margin-inline: auto;
    --content-container-margin-bottom: calc(32px + 2 * var(--footer-margin));
    --content-container-margin-top: 104px;
    --footer-margin: 40px;
    --text-font-size: 1.16em;
    color: var(--cr-primary-text-color);
    display: block;
  }

  .secondary {
    color: var(--cr-secondary-text-color);
  }

  .action-container {
    bottom: 0;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
  }

<if expr="not lacros">
  /* The settings button is right next to the action button on Lacros. */
  .action-container #settingsButton {
    left: var(--action-container-padding);
    position: absolute;
  }

  :host-context([dir='rtl']) .action-container #settingsButton {
    left: auto;
    right: var(--action-container-padding);
  }
</if>

  /* Old design */
  #illustration-container {
    height: 168px;
    margin-bottom: 32px;
    position: relative;
    width: 100%;
  }

  #illustration {
    background: url(./images/sync_confirmation_illustration.svg);
    background-size: 100% 100%;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
  }

  #illustration-container > img {
    border-radius: 50%;
    height: 68px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 96px;
    width: 68px;
  }

  .heading {
    font-weight: normal;
    margin-bottom: 32px;
    padding: 0 24px;
    text-align: center;
  }

  #content-container {
    /* Saves space for button row. */
    padding-bottom: 96px;
    position: relative;
    width: 100%;
  }

  .message-container {
    line-height: 20px;
    margin-bottom: 16px;
    padding: 0 24px;
  }

  @media (prefers-color-scheme: light) {
    #grey-banner {
      background: var(--paper-grey-50);
      height: 128px;
      top: 0;
      width: 100%;
    }
  }

  #old-footer {
    margin-bottom: 0;
    padding-top: 12px;
  }

  /* New design */
  :host([is-new-design-modal-dialog_]) {
    --avatar-size: 76px;
    --banner-height: 128px;
    --banner-size: 90% 90%;
    --content-container-margin-bottom: 0;
    --content-container-margin-top: 96px;
    --confirmation-description-margin-inline: 32px;
    --footer-margin: 16px;
    --text-font-size: unset;
    min-height: 468px;
    position: relative;
    width: 512px;
  }

  /* Makes the absolutely positioned footer relative to confirmationContainer
     which may be larger than the window. */
  #confirmationContainer {
    min-height: 100%;
    position: absolute;
    width: 100%;
  }

  #headerContainer {
    background-color: var(--theme-frame-color);
    height: var(--banner-height);
    position: relative;
    width: 100%;
  }

  #syncPromoBanner {
    background-image: url(images/sync_confirmation_refreshed_illustration.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--banner-size);
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
  }

  #avatarContainer {
    bottom: calc(var(--avatar-size)/-2);
    height: var(--avatar-size);
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: var(--avatar-size);
    z-index: 1;
  }

  #avatar {
    border: 2px solid var(--md-background-color);
    border-radius: 50%;
    height: 100%;
    width: 100%;
  }

  .work-badge {
    --badge-width: 30px;
    --badge-offset: -6px;
    border: 3px solid white;
    border-radius: 50%;
    bottom: var(--badge-offset);
    height: var(--badge-width);
    inset-inline-end: var(--badge-offset);
    position: absolute;
    width: var(--badge-width);
  }

  :host([is-new-design-modal-dialog_]) .work-badge {
    --badge-width: 26px;
    --badge-offset: -8px;
  }

  .work-badge > iron-icon {
    --work-icon-size: 20px;
    background-color: var(--md-background-color);
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(60, 64, 67, 0.12), 0 0 6px rgba(60, 64, 67, 0.15);
    color: var(--signin-work-badge-foreground-color);
    height: var(--work-icon-size);
    padding: calc((var(--badge-width) - var(--work-icon-size)) / 2);
    width: var(--work-icon-size);
  }

  #contentContainer {
    margin-bottom: var(--content-container-margin-bottom);
    margin-top: var(--content-container-margin-top);
    text-align: center;
  }

  #contentContainer h2 {
    font-size: 1.85em;
    font-weight: normal;
  }

  #confirmationDescription {
    font-size: var(--text-font-size);
    margin-inline: var(--confirmation-description-margin-inline);
    margin-top: 16px;
    max-width: 516px;
  }

  #buttonsContainer {
    --action-container-padding: var(--footer-margin);
  }

  #buttonsContainer cr-button {
    font-size: var(--text-font-size);
    min-width: 111px;
  }

  #buttonsContainer #notNowButton {
    font-weight: normal;
  }

  #buttonsContainer #settingsButton {
    font-weight: normal;
  }

  @media (prefers-color-scheme: dark) {
    /* Old design */
    #illustration {
      background-image:
          url(./images/sync_confirmation_illustration_dark.svg);
    }

    /* New design */
    #syncPromoBanner {
      background-image:
          url(images/sync_confirmation_refreshed_illustration_dark.svg);
    }

    .work-badge {
      border-color: var(--md-background-color);
    }
  }
</style>

<!--
  Use the 'consent-description' attribute to annotate all the UI elements
  that are part of the text the user reads before consenting to the Sync
  data collection . Similarly, use 'consent-confirmation' on UI elements on
  which user clicks to indicate consent.
-->

<template is="dom-if" if="[[!isNewDesign_]]">
  <div id="illustration-container">
    <div id="grey-banner"></div>
    <div id="illustration"></div>
    <img src="[[accountImageSrc_]]">
  </div>
  <div id="content-container">
    <h1 id="syncConfirmationHeading" class="heading" consent-description>
      $i18n{syncConfirmationTitle}
    </h1>
    <div class="message-container">
      <div consent-description>$i18n{syncConfirmationSyncInfoTitle}</div>
      <div class="secondary" consent-description>
        $i18n{syncConfirmationSyncInfoDesc}
      </div>
    </div>
    <div id="old-footer" class="message-container secondary">
      $i18n{syncConfirmationSettingsInfo}
    </div>
    <div class="action-container">
      <cr-button class="action-button" id="confirmButton"
          on-click="onConfirm_" consent-confirmation autofocus>
        $i18n{syncConfirmationConfirmLabel}
      </cr-button>
      <if expr="is_macosx or is_linux">
        <cr-button id="settingsButton" on-click="onGoToSettings_"
            consent-confirmation>
          $i18n{syncConfirmationSettingsLabel}
        </cr-button>
      </if>
      <if expr="not lacros">
        <cr-button id="cancelButton" on-click="onUndo_">
          $i18n{syncConfirmationUndoLabel}
        </cr-button>
      </if>
      <if expr="not is_macosx and not is_linux">
        <cr-button id="settingsButton" on-click="onGoToSettings_"
            consent-confirmation>
          $i18n{syncConfirmationSettingsLabel}
        </cr-button>
      </if>
    </div>
  </div>
</template>

<template is="dom-if" if="[[isNewDesign_]]">
  <div id="confirmationContainer">
    <div id="headerContainer" style$="--theme-frame-color:[[highlightColor_]]">
      <div id="syncPromoBanner"></div>
      <div id="avatarContainer">
        <img id="avatar" alt="" src="[[accountImageSrc_]]">
        <div class="work-badge" hidden="[[!showEnterpriseBadge_]]">
          <iron-icon class="icon" icon="cr:domain"></iron-icon>
        </div>
      </div>
    </div>

    <div id="contentContainer">
      <h2 consent-description id="syncConfirmationHeading">
        $i18n{syncConfirmationTitle}
      </h2>
      <div id="confirmationDescription" class="secondary">
        <span consent-description>$i18n{syncConfirmationSyncInfoTitle}</span>.
        <span>
          $i18n{syncConfirmationSettingsInfo}
        </span>
        <span consent-description>$i18n{syncConfirmationSyncInfoDesc}</span>.
      </div>
    </div>
    <div id="buttonsContainer" class="action-container">
      <cr-button class="action-button" id="confirmButton"
          on-click="onConfirm_" consent-confirmation>
        $i18n{syncConfirmationConfirmLabel}
      </cr-button>
      <if expr="is_macosx or is_linux">
        <cr-button id="settingsButton" on-click="onGoToSettings_"
            consent-confirmation>
          $i18n{syncConfirmationSettingsLabel}
        </cr-button>
      </if>
      <if expr="not lacros">
        <cr-button id="notNowButton" on-click="onUndo_">
          $i18n{syncConfirmationUndoLabel}
        </cr-button>
      </if>
      <if expr="not is_macosx and not is_linux">
        <cr-button id="settingsButton" on-click="onGoToSettings_"
            consent-confirmation>
          $i18n{syncConfirmationSettingsLabel}
        </cr-button>
      </if>
    </div>
  </div>
</template>
